/* 全局布局相关的CSS变量和样式 */
:root {
  /* 公共头部高度 */
  --header-height: 48px;
  
  /* 页面内容区域可用高度（视口高度减去头部高度） */
  --content-available-height: calc(100vh - var(--header-height));
  
  /* 页面内容区域可用高度（减去头部和一些额外间距） */
  --content-height-with-padding: calc(100vh - var(--header-height) - 32px);
}

/* 全局页面容器样式 */
.page-container {
  height: var(--content-available-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-container-with-padding {
  height: var(--content-height-with-padding);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* 页面内容区域样式 */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 全局滚动区域样式 */
.scroll-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 带内边距的滚动区域 */
.scroll-container-with-padding {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  box-sizing: border-box;
}